<template>
	<view class="page-body">
		<tabbar currentText="活动">
			<!-- 导航 -->
			<view class="navBox">
				<view class="screenBox">
					<view class="screen_ul">
						<view class="screen_li" @click="actionSheetTap()">活动状态
							<image class="small_down" src="@/static/images/small-down.png"></image>
						</view>
						<view class="screen_li" @click="showTree()">活动类型
							<image class="small_down" src="@/static/images/small-down.png"></image>
						</view>
						<!-- <u-dropdown>
							<u-dropdown-item v-model="activityStatus" title="活动状态" :options="screenArr" @change="dropdownChangeFun"></u-dropdown-item>
							<u-dropdown-item title="活动类型" :options="">
								
							</u-dropdown-item>
						</u-dropdown> -->
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<view class="content_box">
				<view class="list_ul" v-if="actList.length">
					<block v-for="(item,idx) in actList" :key="'a_'+ idx">
						<view class="list_li" @click="goDetails(item)">
							<view class="actImg">
								<image class="" :src="item.operationImg1 || item.operationImg2 || item.operationImg3"></image>
								<view class="actType" :class="item.activityDivision=='商城活动'?'shopType':''">
									{{item.activityDivision}}/{{item.activityType}}
								</view>
							</view>
							<view class="actName">
								{{item.activityName}}
							</view>
							<view class="list_bottom">
								<view class="actParticipateIn">
									{{item.joinCount || 0}}位销售顾问参与活动
								</view>
								<view class="infoBox">
									<block v-if="item.activityDivision !='粉丝活动'">
										<view class="info_li" v-if="item.orderCount && item.orderCount != '0'">
											<image class="infoIcon" src="@/static/images/order_icon.png"></image>{{item.orderCount || 0}}
										</view>
										<view class="info_li" v-if="item.dealCount && item.dealCount != '0'">
											<image class="infoIcon" src="@/static/images/deal_icon.png"></image>{{item.dealCount || 0}}
										</view>
									</block>
									<view class="info_li" v-if="item.activityType!='见面礼' && item.activityDivision!='粉丝活动' &&  !item.shareCount=='0'">
										<image class="infoIcon" src="@/static/images/share_icon.png"></image>{{item.shareCount || 0}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			    <view class="list_ul" v-else>
					<image style="width: 280rpx;height: 280rpx;margin-top: 100px;margin-left: calc(50% - 140rpx);"  src="@/static/images/nohistory.png"></image>
					<view style="text-align: center;margin-top: 40rpx;">
						暂无数据
					</view>					
				</view>
			
			</view>
		</tabbar>
		
		<tki-tree ref="tkitree" :selectParent="true" :multiple="true" :range="reasonList" :foldAll="false" idKey="name" rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue";
	import tkiTree from '@/components/tki-tree/tki-tree.vue';
	import {
		getAppIndexActivities
	} from '@/service/api/api.js';
	import {
		parseTime
	} from "@/common/util.js"
	export default {
		components: {
			tabbar,
			tkiTree
		},
		data() {
			return {
				screenArr:[
					{label:'全部',value:0},
					{label:'已发布',value:8},
					{label:'已中止',value:1},
					{label:'已结束',value:2}
				],
				activityStatus:'',
				userInfo: {},
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					dealerId: '',
					activityDivision: '',
					activityType: '',
					activityStatus: ''
				},
				actList: [],
				total: 0,
				reasonList: []
			}
		},
		filters: {
			dataFormat(val) {
				return parseTime(val, '{y}-{m}-{d} {h}:{i}')
			}
		},
		onLoad() {
			try {
				this.userInfo = uni.getStorageSync('user_info')
				// console.log(this.userInfo)
			} catch (e) {
				console.log(e)
			}

			this.init()
		},
		onReachBottom() {
			if (this.total > this.actList.length) {
				this.listQuery.pageNum += 1;
				this.reqActList()
			}
		},
		methods: {
			init() {
				this.reasonList = [
				// 	{
				// 	name: "媒体投放",
				// 	children: [{name: "品牌投放"}, {name: "活动投放"}]
				// }, 
				{
					name: "营销活动",
					children: [{name: "见面礼"}, {name: "新品上市"}, {name: "团购会"}, {name: "促销会"}, {name: "展销会"}, {name: "开业店庆"}, {name: "试驾体验"}]
				}, {
					name: "粉丝活动",
					children: [{name: "客户关怀"}, {name: "公益活动"}, {name: "粉丝沙龙"}, {name: "自由行"}, {name: "挑战赛"}, {name: "演艺赛事"}]
				}, 
				// {
				// 	name: "商城活动",
				// 	children: [{name: "促销玩法"}]
				// },
				],
				this.reqActList()
			},


			handleFilter() {
				this.actList = []
				this.listQuery.pageNum = 1;
				this.reqActList()
			},

			async reqActList() {
				let res=await getAppIndexActivities({
					...this.listQuery,
					dealerId: this.userInfo.dealerId || '',
					userDeptId: this.userInfo.userDeptId || ''
				})
				
				if(res.data.code==0){
					this.actList = this.actList.concat(res.data.data.list)
					this.total = res.data.data.total
					
					// if(res.data.pageNum==this.listQuery.pageNum){
					// 	uni.showToast({
					// 		title: '没有更多数据了',
					// 		icon: 'none'
					// 	})
					// }
				}
			},
			dropdownChangeFun(){
				if(this.activityStatus==0){
					this.listQuery.activityStatus=''
				}else if(this.activityStatus==8){
					this.listQuery.activityStatus=0
				}else{
					this.listQuery.activityStatus=this.activityStatus
				}				
				this.handleFilter()
			},
			actionSheetTap(idx) {
				let screenArr = ['全部', '已发布', '已中止', '已结束']	

				uni.showActionSheet({
					itemList: screenArr,
					success: (e) => {
						this.listQuery.activityStatus = e.tapIndex == '0' ? '' : e.tapIndex += 1
						this.handleFilter()
					}
				})
			},
			
			// 显示树形选择器
			showTree() {
				this.$refs.tkitree._show();
			},
			
			// 确定回调事件
			treeConfirm(e) {
				let activityDivision = []
				let activityType = []
				if(e && e.length > 0) {
					e.forEach(item => {
						activityDivision.push(item.name)
						if(item.parents && item.parents.length > 0) {	//表示为二级菜单
							activityType.push(item.name)
						}
					})
				}
				this.listQuery.activityDivision = activityDivision.join()
				this.listQuery.activityType = activityType.join()
				
				this.handleFilter()
			},
			
			treeCancel(e) {},

			goDetails(item) {

				uni.navigateTo({
					url: `/pages/activity/details/index?activityId=${item.activityId}`
				})
			},

			goBack() { //返回上一层
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss'
</style>
